<template>
  <div>
    <el-row :gutter="20">
      <template v-for="(item,index) in info.slice(0,4)">
        <el-col :span="4" :key="index">
          <el-card class="box-card">
            <div class="money-item">
              <div>
                <i class="el-icon-bank-card"></i>
                <span v-text="item.title"></span>
              </div>
              <div class="money-count">￥{{item.value}}</div>
            </div>
          </el-card>
        </el-col>
      </template>

      <el-col
        :span="4"
        v-show="activeName != 3"
        v-for="(item,index) in info.slice(5,7)"
        :key="index + 10"
      >
        <el-card class="box-card">
          <div class="money-item">
            <div>
              <i class="el-icon-bank-card"></i>
              <span v-text="item.title"></span>
            </div>
            <div class="money-count">￥{{item.value}}</div>
          </div>
        </el-card>
      </el-col>

      <el-col
        :span="4"
        v-show="activeName == 3"
        v-for="(item,index) in info.slice(6,8)"
        :key="index + 100"
      >
        <el-card class="box-card">
          <div class="money-item">
            <div>
              <i class="el-icon-bank-card"></i>
              <span v-text="item.title"></span>
            </div>
            <div class="money-count">￥{{item.value}}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin:10px 0" v-show="activeName != 4">
      <el-col :span="6">
        <div class="form-item">
          <span class="title">订单编号</span>
          <el-input placeholder="请输入订单编号" v-model="param.tbOrder.orderNum"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="form-item">
          <span class="title">手机号</span>
          <el-input placeholder="请输入手机号" v-model="param.tbOrder.receiverMobile"></el-input>
        </div>
      </el-col>
      <el-col :span="6" v-show="activeName == 3">
        <div class="form-item">
          <span class="title">收入&支出</span>
          <el-select placeholder="请选择" style="width:100%" v-model="param.tbOrder.rewardType">
            <el-option
              v-for="item in rewardTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="form-item button-container">
          <el-button type="primary" @click="searchCustomer" icon="el-icon-search">查询</el-button>
          <el-button type="primary" @click="resetSearchCotnet" icon="el-icon-refresh">重置</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin:10px 0" v-show="activeName == 4">
      <el-col :span="6">
        <div class="form-item">
          <span class="title">创建日期</span>
          <el-date-picker
            v-model="createdateList"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="false"
          ></el-date-picker>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="form-item">
          <span class="title">手机号</span>
          <el-input placeholder="请输入手机号" v-model="param1.data.mobile"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="form-item button-container">
          <el-button type="primary" @click="searchCustomer" icon="el-icon-search">查询</el-button>
          <el-button type="primary" @click="resetSearchCotnet" icon="el-icon-refresh">重置</el-button>
        </div>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" v-loading="isLoading" @tab-click="activeNameChange">
      <el-tab-pane label="收入流水" name="0">
        <el-table :data="tableData" v-show="activeName == 0" style="width: 100%">
          <el-table-column prop="orderNum" label="关联订单编号"></el-table-column>
          <el-table-column prop="phone" label="手机号"></el-table-column>
          <el-table-column prop="totalPay" label="订单总金额（元）"></el-table-column>
          <!-- <el-table-column prop="bucklingMoney" label="钻石减免金额（元）"></el-table-column> -->
          <el-table-column prop="actualPay" label="实际支付金额（元）"></el-table-column>
          <el-table-column prop="entryAmount" label="入账金额（元）"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="结算流水" name="1">
        <el-tabs
          v-model="settlementActiveName"
          style="margin-top:0"
          type="card"
          @tab-click="activeNameChange"
        >
          <el-tab-pane label="正在结算" name="1"></el-tab-pane>
          <el-tab-pane label="已结算" name="0"></el-tab-pane>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="orderNum" label="关联订单编号"></el-table-column>
            <!-- <el-table-column prop="name" label="代理姓名"></el-table-column>
            <el-table-column prop="phone" label="代理电话"></el-table-column>-->
            <el-table-column prop="totalPay" label="订单总金额（元）"></el-table-column>
            <el-table-column
              prop="price"
              :label="settlementActiveName == '0' ? '应结算金额（元)' : '结算金额（元)'"
            ></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="handleWatch(scope.row)" type="text" size="small">查看结算单</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tabs>
      </el-tab-pane>

      <el-tab-pane label="退款流水" name="2">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="orderNum" label="关联订单编号"></el-table-column>
          <el-table-column prop="createTime" label="审核时间"></el-table-column>
          <el-table-column prop="wechatNick" label="用户微信昵称"></el-table-column>
          <el-table-column prop="mobile" label="用户微信手机"></el-table-column>
          <!-- <el-table-column prop="name" label="上级代理姓名"></el-table-column> -->
          <el-table-column prop="actualPay" label="退款金额"></el-table-column>
          <!-- <el-table-column prop="platformrefund"
                                     label="平台退款金额">
                    </el-table-column>
                    <el-table-column prop="agentrefund"
                                     label="代理退款金额">
          </el-table-column>-->
        </el-table>
      </el-tab-pane>
      <!-- <el-tab-pane label="钻石流水" name="3">
        <el-tabs
          v-model="diamondsActiveName"
          style="margin-top:0"
          type="card"
          @tab-click="activeNameChange"
        >
          <el-tab-pane label="钻石收入" name="0">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="orderNum" label="关联订单编号"></el-table-column>
              <el-table-column prop="wechatNick" label="用户微信昵称"></el-table-column>
              <el-table-column prop="mobile" label="用户微信手机"></el-table-column>
              <el-table-column
                prop="rewardType"
                label="收入项目"
                :formatter="(row) => { return payTypeFormatter(row,0) } "
              ></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="钻石支出" name="1">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="orderNum" label="关联订单编号"></el-table-column>
              <el-table-column prop="wechatNick" label="用户微信昵称"></el-table-column>
              <el-table-column prop="mobile" label="用户微信手机"></el-table-column>
              <el-table-column
                prop="rewardType"
                label="支出项目"
                :formatter="(row) => { return payTypeFormatter(row,1) } "
              ></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane> -->

      <el-tab-pane label="积分流水" name="4">
        <el-tabs
          v-model="integralActiveName"
          style="margin-top:0"
          type="card"
          @tab-click="activeNameChange"
        >
          <el-tab-pane label="积分收入" name="0">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="num" label="积分数量"></el-table-column>
              <el-table-column prop="mobile" label="客户电话"></el-table-column>
              <el-table-column prop="wechatNick" label="客户昵称"></el-table-column>
              <el-table-column prop="types" label="积分来源"></el-table-column>
              <el-table-column prop="createTime" label="获取时间"></el-table-column>
            </el-table>
          </el-tab-pane>
          <!-- <el-tab-pane label="积分支出" name="1">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="orderNum" label="订单编号"></el-table-column>
              <el-table-column prop="name" label="支付积分数量"></el-table-column>
              <el-table-column prop="phone" label="客户电话"></el-table-column>
              <el-table-column prop="totalPay" label="客户昵称"></el-table-column>
              <el-table-column prop="totalPay" label="兑换商品"></el-table-column>
              <el-table-column prop="totalPay" label="兑换时间"></el-table-column>
            </el-table>
          </el-tab-pane>-->
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
    <div class="pagination">
      <el-pagination
        background
        @current-change="currentPageChange"
        layout="prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog title="结算单" :visible.sync="dialogVisible" width="50%">
      <SettlementList ref="settlementRef" @submit="dialogVisible = $event" />
    </el-dialog>
  </div>
</template>

<script>
import SettlementList from "./SettlementList";

export default {
  data() {
    return {
      isLoading: false,
      dialogVisible: false, //是否显示结算单
      activeName: "0", //总的tab
      settlementActiveName: "1", //结算流水
      diamondsActiveName: "0", //钻石结算
      integralActiveName: "0", //积分流水
      info: [
        { title: "总收入金额", value: "" },
        { title: "今日收入", value: "" },
        { title: "7日收入", value: "" },
        { title: "总入账金额", value: "" },
        { title: "已结算金额", value: "" },
        { title: "待结算金额", value: "" }
        // { title: "累计发放钻石", value: "" },
        // { title: "累计消耗钻石", value: "" }
      ],
      rewardTypeOptions: [
        { label: "签到", value: 1 },
        { label: "消费", value: 2 },
        { label: "充值", value: 3 },
        { label: "代理下发", value: 4 }
      ],
      tableData: [],
      total: 0, //数据总数
      param: {
        tbOrder: {
          orderNum: "",
          receiverMobile: "",
          mobile: "",
          phone: "",
          rewardType: "",
          type: ""
        },
        queryRequest: {
          pageSize: 8,
          pageNum: 1
        }
      },
      createdateList: [],
      param1: {
        data: {
          mobile: "",
          status: "0",
          startCreateTime: "",
          endCreateTime: ""
        },
        queryRequest: {
          pageSize: 8,
          pageNum: 1
        }
      }
    };
  },
  components: {
    SettlementList
  },
  mounted() {
    this.activeNameChange();
    this.$service.getFinanceInfo().then(list => {
      this.info[0].value = list[0] && list[0].data.totalrevenue;
      this.info[1].value = list[1] && list[1].data.todayincome;
      this.info[2].value = list[2] && list[2].data.todayincome;
      this.info[3].value = list[3] && list[3].data.entryamount;
      this.info[4].value = list[4] && list[4].data.settled;
      this.info[5].value = list[5] && list[5].data.settled;
      // this.info[6].value = list[6] && list[6].data.scort;
      // this.info[7].value = list[7] && list[7].data.scort;
    });
  },
  methods: {
    currentPageChange(e) {
      this.param.queryRequest.pageNum = e;
      this.activeNameChange();
    },
    payTypeFormatter(row, type) {
      let rewardType = row.rewardType;
      let endTextObj = {
        0: "奖励",
        1: "使用"
      };
      let rewardTypeObj = {
        1: "签到",
        2: "消费",
        3: "充值",
        4: "代理下发"
      };
      return `${rewardTypeObj[rewardType]}${endTextObj[type]}`;
    },

    editData(res) {
      //debugger;
      this.isLoading = false;
      this.tableData = (res.data && res.data.rows) || [];
      this.total = (res.data && res.data.total) || 0;
    },
    //总的接口请求方法
    activeNameChange(e) {
      this.initData();
    },
    initData(e) {
      this.isLoading = true;
      let index = this.activeName;
      let orderNum = this.param.tbOrder.orderNum;
      let phone = this.param.tbOrder.receiverMobile;
      let queryRequest = this.param.queryRequest;
      let param = {
        tbOrder: {
          orderNum: orderNum,
          receiverMobile: phone,
          mobile: phone,
          phone: phone,
          rewardType: this.param.tbOrder.rewardType,
          type: this.diamondsActiveName
        },
        queryRequest: queryRequest
      };
      if (this.createdateList.length > 0) {
        this.param1.data.startCreateTime = this.createdateList[0];
        this.param1.data.endCreateTime = this.createdateList[1];
      }
      //收入流水
      if (index == 0) {
        this.$service.queryRevenueFlow(param).then(res => {
          //console.log(res);
          this.editData(res);
        });
      }
      //结算流水
      if (index == 1) {
        //正在结算
        if (this.settlementActiveName == "0") {
          this.$service.queryInProgress(param).then(res => {
            this.editData(res);
          });
        } else {
          this.$service.queryClosed(param).then(res => {
            this.editData(res);
          });
        }
      }

      //退款流水
      if (index == 2) {
        this.$service.queryRefundFlow(param).then(res => {
          this.editData(res);
        });
      }

      //钻石流水
      if (index == 3) {
        if (this.diamondsActiveName == "0") {
          this.$service.queryDiamondIncome(param).then(res => {
            console.log(res);
            this.editData(res);
          });
        } else {
          this.$service.queryDiamondExpenditure(param).then(res => {
            console.log(res);
            this.editData(res);
          });
        }
      }

      //积分流水
      if (index == 4) {
        if (this.integralActiveName == "0") {
          this.$service.intergalrecordList(this.param1).then(res => {
            console.log(res);
            this.editData(res);
          });
          // this.$service.queryDiamondIncome(param).then(res => {
          //   console.log(res);
          //   this.editData(res);
          // });
        } else {
          
        }
      }
    },
    //搜索
    searchCustomer() {
      this.param.queryRequest.pageNum = 1;
      this.activeNameChange();
    },
    //清空搜索条件
    resetSearchCotnet() {
      this.param = {
        tbOrder: {
          orderNum: "",
          receiverMobile: "",
          mobile: "",
          phone: "",
          rewardType: "",
          type: ""
        },
        queryRequest: {
          pageSize: 8,
          pageNum: 1
        }
      };
      this.param1 = {
        data: {
          mobile: "",
          status: "0",
          startCreateTime: "",
          endCreateTime: ""
        },
        queryRequest: {
          pageSize: 8,
          pageNum: 1
        }
      };
      this.createdateList =[];
      this.initData();
    },
    //查看结算单
    handleWatch(row) {
      console.log(row);
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.settlementRef.initData(row.orderNum);
      });
    }
  }
};
</script>

<style lang="scss">
.money-item {
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  font-size: 14px;
  color: #909399;
  font-weight: 500;
  i {
    font-size: 20px;
    margin-right: 5px;
  }
  div:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
}
</style>